<template>
  <div class="topic-page">
    <!-- 话题头部 -->
    <section class="topic-header bg-white dark:bg-gray-800 shadow-sm">
      <!-- 面包屑导航 -->
      <div
        class="container mx-auto px-4 py-4 border-b border-gray-200 dark:border-gray-700"
      >
        <el-breadcrumb>
          <el-breadcrumb-item :to="{ path: '/community' }"
            >社区首页</el-breadcrumb-item
          >
          <el-breadcrumb-item>话题详情</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <div class="container mx-auto px-4 py-8">
        <div class="flex items-start gap-6">
          <!-- 话题信息 -->
          <div class="flex-1">
            <div class="flex items-center gap-3 mb-4">
              <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
                #{{ topicInfo.name }}
              </h1>
              <el-tag :type="topicInfo.type" size="large" effect="dark">
                {{ topicInfo.category }}
              </el-tag>
              <el-tag
                v-if="topicInfo.isHot"
                type="danger"
                size="large"
                effect="dark"
              >
                热门话题
              </el-tag>
            </div>
            <p
              class="text-gray-600 dark:text-gray-400 mb-4 text-lg leading-relaxed"
            >
              {{ topicInfo.description }}
            </p>
            <div
              class="flex items-center gap-6 text-gray-500 dark:text-gray-400"
            >
              <div class="stat-item flex items-center">
                <el-icon class="mr-2"><Document /></el-icon>
                <span class="font-medium text-lg">{{
                  topicInfo.postsCount
                }}</span>
                <span class="ml-1">内容</span>
              </div>
              <div class="stat-item flex items-center">
                <el-icon class="mr-2"><User /></el-icon>
                <span class="font-medium text-lg">{{
                  topicInfo.participantsCount
                }}</span>
                <span class="ml-1">参与</span>
              </div>
              <div class="stat-item flex items-center">
                <el-icon class="mr-2"><View /></el-icon>
                <span class="font-medium text-lg">{{
                  topicInfo.viewsCount
                }}</span>
                <span class="ml-1">浏览</span>
              </div>
              <div class="stat-item flex items-center">
                <el-icon class="mr-2"><Star /></el-icon>
                <span class="font-medium text-lg">{{
                  topicInfo.followersCount
                }}</span>
                <span class="ml-1">关注</span>
              </div>
            </div>
          </div>

          <!-- 操作按钮 -->
          <div class="flex items-center gap-4">
            <el-button
              type="primary"
              :icon="ChatDotRound"
              @click="$router.push('/user/topics')"
            >
              我参与的话题
            </el-button>
            <el-button
              :type="isFollowing ? 'default' : 'primary'"
              @click="handleFollow"
            >
              {{ isFollowing ? "已关注" : "关注话题" }}
            </el-button>
            <el-dropdown trigger="click" @command="handleMoreAction">
              <el-button size="large">
                <el-icon><More /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item command="share">
                    <el-icon><Share /></el-icon>
                    分享话题
                  </el-dropdown-item>
                  <el-dropdown-item command="report" divided>
                    <el-icon><Warning /></el-icon>
                    举报话题
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </div>
    </section>

    <!-- 主要内容区 -->
    <div class="container mx-auto px-4 py-8">
      <div class="flex gap-6">
        <!-- 左侧内容列表 -->
        <div class="flex-1">
          <!-- 筛选工具栏 -->
          <div
            class="filter-toolbar bg-white dark:bg-gray-800 rounded-lg p-4 mb-6 shadow-sm hover:shadow-md transition-shadow duration-300"
          >
            <div class="flex items-center gap-4">
              <!-- 搜索输入框 -->
              <el-input
                v-model="searchQuery"
                placeholder="搜索内容"
                class="!w-44"
              />

              <!-- 排序按钮组 -->
              <div class="flex gap-2">
                <el-button
                  :type="sortBy === 'newest' ? 'primary' : ''"
                  @click="sortBy = 'newest'"
                >
                  最新发布
                </el-button>
                <el-button
                  :type="sortBy === 'most_liked' ? 'primary' : ''"
                  @click="sortBy = 'most_liked'"
                >
                  最多点赞
                </el-button>
                <el-button
                  :type="sortBy === 'most_commented' ? 'primary' : ''"
                  @click="sortBy = 'most_commented'"
                >
                  最多评论
                </el-button>
              </div>

              <!-- 内容类型筛选 -->
              <el-select
                v-model="contentType"
                placeholder="内容类型"
                @change="handleContentTypeChange"
                clearable
                class="!w-32"
              >
                <el-option
                  v-for="type in contentTypes"
                  :key="type.value"
                  :label="type.label"
                  :value="type.value"
                />
              </el-select>
            </div>
          </div>

          <!-- 内容列表 -->
          <div class="posts-list" v-loading="loading">
            <PostCard
              v-for="post in postsList"
              :key="post.id"
              :post="post"
              @like="handleLike"
              @comment="handleComment"
              @share="handleShare"
              @favorite="handleFavorite"
              class="mb-6 bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-all duration-300"
            />

            <!-- 空状态 -->
            <el-empty
              v-if="!loading && !postsList.length"
              description="暂无相关内容"
              class="bg-white dark:bg-gray-800 rounded-lg p-8"
            >
              <el-button type="primary" @click="handlePost">发布内容</el-button>
            </el-empty>

            <!-- 分页 -->
            <div
              v-if="total > 0"
              class="pagination-wrapper flex justify-center mt-8"
            >
              <el-pagination
                v-model:current-page="currentPage"
                v-model:page-size="pageSize"
                :page-sizes="[10, 20, 30, 50]"
                :total="total"
                layout="total, sizes, prev, pager, next, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                background
                class="dark:bg-gray-800 dark:text-gray-300"
              />
            </div>
          </div>
        </div>

        <!-- 右侧边栏 -->
        <div class="sidebar w-80">
          <!-- 活跃参与者 -->
          <div
            class="active-users bg-white dark:bg-gray-800 rounded-lg p-6 mb-6 shadow-sm hover:shadow-md transition-all duration-300"
          >
            <h3
              class="text-lg font-bold mb-4 flex items-center text-gray-900 dark:text-white"
            >
              <el-icon class="mr-2"><User /></el-icon>
              活跃参与者
            </h3>
            <div class="users-list space-y-4">
              <div
                v-for="user in activeUsers"
                :key="user.id"
                class="user-item flex items-center justify-between hover:bg-gray-50 dark:hover:bg-gray-700 p-2 rounded-lg transition-colors duration-300"
              >
                <div class="flex items-center">
                  <el-avatar
                    :size="40"
                    :src="user.avatar"
                    class="cursor-pointer"
                    @click="$router.push(`/user/profile/${user.id}`)"
                  />
                  <div
                    class="ml-3 cursor-pointer"
                    @click="$router.push(`/user/profile/${user.id}`)"
                  >
                    <div class="font-medium text-gray-900 dark:text-white">
                      {{ user.nickname }}
                    </div>
                    <div class="text-sm text-gray-500 dark:text-gray-400">
                      {{ user.postsCount }}个内容
                    </div>
                  </div>
                </div>
                <el-button
                  size="small"
                  :type="user.isFollowing ? 'success' : 'primary'"
                  @click="handleFollowUser(user)"
                >
                  {{ user.isFollowing ? "已关注" : "关注" }}
                </el-button>
              </div>
            </div>
          </div>

          <!-- 相关话题 -->
          <div
            class="related-topics bg-white dark:bg-gray-800 rounded-lg p-6 shadow-sm hover:shadow-md transition-all duration-300"
          >
            <h3
              class="text-lg font-bold mb-4 flex items-center text-gray-900 dark:text-white"
            >
              <el-icon class="mr-2"><Collection /></el-icon>
              相关话题
            </h3>
            <div class="topics-list space-y-3">
              <div
                v-for="topic in relatedTopics"
                :key="topic.id"
                class="topic-item flex items-center justify-between cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700 p-2 rounded-lg transition-colors duration-300"
                @click="handleTopicClick(topic)"
              >
                <div class="flex-1">
                  <div class="font-medium text-gray-900 dark:text-white">
                    #{{ topic.name }}
                  </div>
                  <div class="text-sm text-gray-500 dark:text-gray-400">
                    {{ topic.postsCount }}个内容
                  </div>
                </div>
                <el-icon class="text-gray-400 dark:text-gray-500"
                  ><ArrowRight
                /></el-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 发布内容弹窗 -->
    <el-dialog
      v-model="showPostForm"
      title="发布内容"
      width="800px"
      :close-on-click-modal="false"
      destroy-on-close
      class="dark:bg-gray-800"
    >
      <PostForm
        :initial-topic="topicInfo"
        @cancel="showPostForm = false"
        @submit="handlePostSubmit"
      />
    </el-dialog>

    <!-- 分享弹窗 -->
    <ShareDialog
      v-model="showShareDialog"
      :title="'#' + topicInfo.name"
      :url="generateShareUrl()"
      :platforms="sharePlatforms"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import {
  Edit,
  Star,
  Document,
  User,
  View,
  More,
  Share,
  Warning,
  Collection,
  ArrowRight,
  Search,
  ChatDotRound,
} from "@element-plus/icons-vue";
import PostCard from "@/components/community/PostCard.vue";
import PostForm from "@/components/community/PostForm.vue";
import ShareDialog from "@/components/global/ShareDialog.vue";
import service from "@/api/axios";

const route = useRoute();
const router = useRouter();

// 话题信息
const topicInfo = ref({
  id: "",
  name: "",
  category: "",
  type: "",
  description: "",
  postsCount: 0,
  participantsCount: 0,
  viewsCount: 0,
  followersCount: 0,
  isHot: false,
});

// 分享相关
const showShareDialog = ref(false);
const sharePlatforms = [
  { name: "weixin", icon: "wechat", label: "微信" },
  { name: "weibo", icon: "weibo", label: "微博" },
  { name: "qq", icon: "qq", label: "QQ" },
];

// 生成分享链接
const generateShareUrl = () => {
  return `${window.location.origin}/community/topic/${topicInfo.value.id}`;
};

// 处理更多操作
const handleMoreAction = async (command) => {
  switch (command) {
    case "share":
      showShareDialog.value = true;
      break;
    case "report":
      try {
        await ElMessageBox.confirm("确定要举报这个话题吗？", "举报确认", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        });
        ElMessage.success("举报已提交，我们会尽快处理");
      } catch {
        // 用户取消操作
      }
      break;
  }
};

// 关注状态
const isFollowing = ref(false);

// 列表数据
const loading = ref(false);
const postsList = ref([]);
const total = ref(0);
const currentPage = ref(1);
const pageSize = ref(10);
const sortBy = ref("newest");
const contentType = ref("");

// 内容类型选项
const contentTypes = [
  { label: "全部", value: "" },
  { label: "图文", value: "image" },
  { label: "视频", value: "video" },
  { label: "攻略", value: "guide" },
  { label: "问答", value: "qa" },
];

// 活跃用户
const activeUsers = ref([]);

// 相关话题
const relatedTopics = ref([]);

// 发布表单控制
const showPostForm = ref(false);

// 搜索关键词
const searchQuery = ref("");

// 所有帖子数据（未分页）
const allPosts = ref([]);

// 获取话题信息
const getTopicInfo = async () => {
  try {
    const url = `/public/topics/${route.params.id}`;
    
    // 调用API获取话题信息
    const apiData = await service.get(url).catch(() => null);
    console.log("话题详情API返回:", apiData);
    
    // 如果API调用成功且有数据，使用API返回数据
    if (apiData && Object.keys(apiData).length > 0) {
      // 根据接口文档中的数据格式进行映射转换
      const mappedData = {
        id: apiData.id,
        name: apiData.title || apiData.name || "",
        category: apiData.category?.name || "未分类",
        type: getCategoryType(apiData.category?.code),
        description: apiData.content || "",
        postsCount: apiData.postsCount || apiData.replyCount || 0,
        participantsCount: 0, // 接口文档中未提供此字段
        viewsCount: apiData.viewCount || 0,
        followersCount: apiData.favoriteCount || 0,
        isHot: apiData.viewCount > 1000, // 根据浏览量判断是否热门
        isFollowing: false, // 接口文档中未提供此字段
      };
      
      Object.assign(topicInfo.value, mappedData);
    } else {
      console.log("话题详情API返回空数据，使用测试数据");
      // API调用失败或无数据，使用测试数据
      const response = {
        id: route.params.id,
        name: "贵港美食探店",
        category: "美食",
        type: "warning",
        description:
          "发现贵港地道美食，分享舌尖上的惊喜。从街边小店到老字号名店，一起寻找最地道的贵港味道。",
        postsCount: 1234,
        participantsCount: 567,
        viewsCount: 12345,
        isFollowing: false,
        followersCount: 123,
        isHot: true,
      };
      
      Object.assign(topicInfo.value, response);
    }
  } catch (error) {
    console.error("获取话题信息失败:", error);
    ElMessage.error("获取话题信息失败");
  }
};

// 获取类别对应的标签类型
const getCategoryType = (code) => {
  const typeMap = {
    food: "warning",
    travel: "success",
    culture: "primary",
    history: "info",
    default: "danger",
  };
  return typeMap[code] || typeMap.default;
};

// 获取内容列表
const getPostsList = async () => {
  loading.value = true;
  try {
    // 正确的API路径：/api/public/topics/{topicId}/posts
    const url = `/public/topics/${route.params.id}/posts`;
    
    // API不支持分页，不传递分页参数，仅传递排序和内容类型过滤条件
    const params = {
      sortBy: sortBy.value,
      contentType: contentType.value || undefined
    };
    
    // 调用API获取内容列表
    const apiData = await service.get(url, { params }).catch(() => null);
    console.log("帖子列表API返回:", apiData);
    
    // 如果API调用成功且有数据（不为空数组）
    if (apiData && Array.isArray(apiData) && apiData.length > 0) {
      console.log("使用API返回的帖子数据");
      // 保存所有未分页的帖子数据
      allPosts.value = apiData;
      
      // 设置总数
      total.value = apiData.length;
      
      // 应用前端分页和过滤
      applyLocalPagingAndFiltering();
      
    } else {
      console.log("API返回空数据或格式不符，使用测试数据");
      // API调用失败或无数据，使用测试数据
      const response = [
        {
          id: 1,
          content: "今天探店发现了一家超级好吃的肠粉店，就在贵港市港北区中山路口附近。点了招牌鲜虾肠粉和牛肉肠粉，皮薄馅多，配上他们特制的酱料，简直绝了！强烈推荐大家去尝尝，性价比超高。",
          media: ["/images/posts/food1.jpg", "/images/posts/food2.jpg"],
          author: {
            id: 1,
            avatar: "/images/avatar/user1.jpg",
            nickname: "美食达人",
          },
          createTime: "2024-03-15 10:00:00",
          likes: 123,
          comments: 45,
          shares: 67,
        },
        {
          id: 2,
          content: "贵港最有名的螺蛳粉店，没有之一！酸辣适中，配料丰富，而且汤底熬得特别醇厚。去了三次都要排队，但绝对值得一等。位置在仁义路45号，小伙伴们周末可以去打卡！",
          media: ["/images/posts/food3.jpg"],
          author: {
            id: 2,
            avatar: "/images/avatar/user2.jpg",
            nickname: "吃货小王",
          },
          createTime: "2024-03-12 14:20:00",
          likes: 89,
          comments: 23,
          shares: 12,
        }
      ];
      
      // 保存所有未分页的帖子数据
      allPosts.value = response;
      
      // 设置总数
      total.value = response.length;
      
      // 应用前端分页和过滤
      applyLocalPagingAndFiltering();
    }
    
    // 获取每个帖子的详情和评论
    await Promise.all(postsList.value.map(post => getPostDetails(post.id)));
    
  } catch (error) {
    console.error("获取内容列表失败:", error);
    ElMessage.error("获取内容列表失败");
  } finally {
    loading.value = false;
  }
};

// 前端本地分页和筛选
const applyLocalPagingAndFiltering = () => {
  // 搜索筛选
  let filteredPosts = allPosts.value;
  
  if (searchQuery.value) {
    const lowerCaseQuery = searchQuery.value.toLowerCase();
    filteredPosts = filteredPosts.filter(post => 
      post.content && post.content.toLowerCase().includes(lowerCaseQuery)
    );
  }
  
  // 按页码分页
  const startIdx = (currentPage.value - 1) * pageSize.value;
  const endIdx = startIdx + pageSize.value;
  
  // 更新分页数据
  postsList.value = filteredPosts.slice(startIdx, endIdx);
  
  // 更新总条数
  total.value = filteredPosts.length;
};

// 获取帖子详情
const getPostDetails = async (postId) => {
  try {
    // 正确的API路径：/api/public/posts/{postId}
    const url = `/public/posts/${postId}`;
    const postData = await service.get(url).catch(() => null);
    
    if (postData) {
      // 更新帖子列表中对应帖子的详细信息
      const postIndex = postsList.value.findIndex(p => p.id === postId);
      if (postIndex !== -1) {
        // 合并详情数据到列表项
        postsList.value[postIndex] = {
          ...postsList.value[postIndex],
          ...postData,
          isLiked: postData.isLiked || false,
          isFavorited: postData.isFavorited || false
        };
        
        // 获取帖子评论
        await getPostComments(postId);
      }
    }
  } catch (error) {
    console.error(`获取帖子${postId}详情失败:`, error);
  }
};

// 获取帖子评论列表
const getPostComments = async (postId) => {
  try {
    // 正确的API路径：/api/public/posts/{postId}/comments
    const url = `/public/posts/${postId}/comments`;
    const params = {
      pageNum: 1,
      pageSize: 3 // 只获取前3条评论
    };
    
    const commentsData = await service.get(url, { params }).catch(() => null);
    
    if (commentsData && commentsData.list) {
      // 更新帖子列表中对应帖子的评论信息
      const postIndex = postsList.value.findIndex(p => p.id === postId);
      if (postIndex !== -1) {
        postsList.value[postIndex].commentsList = commentsData.list;
        postsList.value[postIndex].commentsTotal = commentsData.total || 0;
      }
    }
  } catch (error) {
    console.error(`获取帖子${postId}评论失败:`, error);
  }
};

// 获取活跃用户
const getActiveUsers = async () => {
  try {
    // 调用获取活跃用户API - 接口文档未提供此API，先使用测试数据
    const response = [
      {
        id: 1,
        avatar: "/images/avatar/user1.jpg",
        nickname: "美食达人",
        postsCount: 123,
        isFollowing: false,
      },
      {
        id: 2,
        avatar: "/images/avatar/user2.jpg",
        nickname: "吃货小王",
        postsCount: 89,
        isFollowing: true,
      },
    ];
    
    activeUsers.value = response;
  } catch (error) {
    console.error("获取活跃用户失败:", error);
    ElMessage.error("获取活跃用户失败");
  }
};

// 获取相关话题
const getRelatedTopics = async () => {
  try {
    // 调用获取相关话题API - 接口文档未提供此API，使用获取话题列表API替代
    const url = "/public/topics";
    
    // 调用API获取话题列表
    const apiData = await service.get(url).catch(() => null);
    
    // 如果API调用成功，使用API返回数据并过滤当前话题
    if (apiData && Array.isArray(apiData)) {
      // 随机选择最多5个相关话题，排除当前话题
      const filteredTopics = apiData
        .filter(topic => topic.id != route.params.id)
        .slice(0, 5);
      
      relatedTopics.value = filteredTopics.map(topic => ({
        id: topic.id,
        name: topic.name,
        postsCount: topic.postsCount || topic.count || 0
      }));
    } else {
      // API调用失败，使用测试数据
      const response = [
        {
          id: 2,
          name: "贵港小吃",
          postsCount: 890,
        },
        {
          id: 3,
          name: "贵港餐厅",
          postsCount: 567,
        },
      ];
      
      relatedTopics.value = response;
    }
  } catch (error) {
    console.error("获取相关话题失败:", error);
    ElMessage.error("获取相关话题失败");
  }
};

// 处理关注话题
const handleFollow = async () => {
  try {
    // 调用关注/取消关注API - 接口文档未提供此API，使用测试实现
    await new Promise((resolve) => setTimeout(resolve, 500));
    isFollowing.value = !isFollowing.value;
    ElMessage.success(isFollowing.value ? "关注成功" : "已取消关注");
  } catch (error) {
    console.error("操作失败:", error);
    ElMessage.error("操作失败");
  }
};

// 处理关注用户
const handleFollowUser = async (user) => {
  try {
    // TODO: 调用关注用户API
    await new Promise((resolve) => setTimeout(resolve, 500));
    user.isFollowing = !user.isFollowing;
    ElMessage.success(user.isFollowing ? "关注成功" : "已取消关注");
  } catch (error) {
    console.error("操作失败:", error);
    ElMessage.error("操作失败");
  }
};

// 处理发布内容
const handlePost = () => {
  showPostForm.value = true;
};

// 处理内容提交
const handlePostSubmit = async (formData) => {
  try {
    // TODO: 调用发布内容API
    await new Promise((resolve) => setTimeout(resolve, 1000));
    ElMessage.success("发布成功");
    showPostForm.value = false;
    getPostsList(); // 刷新列表
  } catch (error) {
    console.error("发布失败:", error);
    ElMessage.error("发布失败");
  }
};

// 处理排序变化
const handleSortChange = () => {
  // 重新获取帖子列表，应用新的排序规则
  getPostsList();
};

// 处理内容类型变化
const handleContentTypeChange = () => {
  // 重新获取帖子列表，应用新的内容类型筛选
  getPostsList();
};

// 处理搜索关键词变化
const handleSearchChange = () => {
  // 无需重新请求API，只需在前端过滤现有数据
  applyLocalPagingAndFiltering();
};

// 监听搜索关键词变化
watch(searchQuery, handleSearchChange);

// 监听sortBy变化
watch(sortBy, handleSortChange);

// 处理分页大小变化
const handleSizeChange = (val) => {
  pageSize.value = val;
  // 仅在前端重新分页，无需请求API
  applyLocalPagingAndFiltering();
};

// 处理页码变化
const handleCurrentChange = (val) => {
  currentPage.value = val;
  // 仅在前端重新分页，无需请求API
  applyLocalPagingAndFiltering();
};

// 处理点赞
const handleLike = async (post) => {
  try {
    // TODO: 调用点赞API
    await new Promise((resolve) => setTimeout(resolve, 500));
    post.isLiked = !post.isLiked;
    post.likes += post.isLiked ? 1 : -1;
    ElMessage.success(post.isLiked ? "点赞成功" : "已取消点赞");
  } catch (error) {
    console.error("操作失败:", error);
    ElMessage.error("操作失败");
  }
};

// 处理评论
const handleComment = (post) => {
  router.push(`/community/post/${post.id}`);
};

// 处理分享
const handleShare = (post) => {
  // TODO: 实现分享功能
};

// 处理收藏
const handleFavorite = async (post) => {
  try {
    // TODO: 调用收藏API
    await new Promise((resolve) => setTimeout(resolve, 500));
    post.isFavorited = !post.isFavorited;
    ElMessage.success(post.isFavorited ? "收藏成功" : "已取消收藏");
  } catch (error) {
    console.error("操作失败:", error);
    ElMessage.error("操作失败");
  }
};

// 处理话题点击
const handleTopicClick = (topic) => {
  router.push(`/community/topic/${topic.id}`);
};

// 初始化
onMounted(() => {
  getTopicInfo();
  getPostsList();
  getActiveUsers();
  getRelatedTopics();
});
</script>

<style lang="scss" scoped>
.topic-page {
  .topic-header {
    .stat-item {
      @apply flex items-center;
    }
  }

  .filter-toolbar {
    :deep(.el-radio-group) {
      @apply flex flex-wrap gap-2;
    }
  }

  .active-users,
  .related-topics {
    @apply transition-all duration-300;

    &:hover {
      @apply shadow-md;
    }
  }

  .card-header {
    @apply flex items-center justify-between;

    .header-left {
      @apply flex items-center gap-4;
    }

    .header-actions {
      @apply flex items-center gap-4;
    }
  }
}
</style>
